<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的hello </title>

    <script src="https://unpkg.com/vue@3.4.32/dist/vue.global.js"></script>
    <!-- 网络下载 vue.js 文件 -->
</head>
<body>
<!--
    01 引入依赖
    02 写一个页面
    03 创建vue对象  和 页面绑定
        01 引入 vue 中的函数  createApp, ref
        02 创建vue对象
          let app = createApp({
               setup(){
                  初始化数据
                  return {
                      数据、函数
                  }
               }
            })
        03  绑定页面
        app.mount("#app")

    {{}}  差值表达式
        可以使用 vue对象中 定义的数据
-->

<div id="app">
     <h1>
         {{msg}}
     </h1>
</div>

<script>
    // 1、从vue中引用一些需要用到的方法. Vue来自我们上面的应用的vue.global.js
    //createApp  创建vue对象
    // ref 让变量编程相应式对象 (页面和 数据进行双向绑定 页面变化数据变化 数据变化页面变化)
    const { createApp, ref } = Vue;
    //2、使用createApp方法来创建vue对象，调用此方法时需要传递参数，而且参数是一个对象，比较复杂
    // 后续我们可以使用工具构建 可以简化这个操作
    const app = createApp({
        setup(){
            //定义页面标签需要用到的属性或方法
            let msg = ref('中彩票5000w'); //定义了一个msg属性，使用ref将普通字符串变成了一个响应式对象
            //需要将定义的属性或方法都返回回去
            return {
                msg,
            }
        }
    });
    //3、将创建的vue实例app，和上面的顶级标签进行关联，这个过程叫做挂载
    app.mount('#app');

</script>

</body>
</html>